<template>
  <div class="expand-form">
    <div v-for="item in data" :key="item.id">
      <component :is="getControl(item)" v-model:value="fieldsValue[item['field']]" v-model:fieldsValue="fieldsValue" :title="item.name" :children="item.children" :modelId="modelId" :editId="editId"
        :field="item.field" :required="item.required" :placeholder="item.tips" :setting="item.setting" v-model:childrenShow="item.childrenShow" />
      <el-collapse-transition>
        <div v-show="item.children?.length > 0 && item.childrenShow">
          <div v-for="child in item.children" :key="child.id">
            <component :is="getControl(child)" v-model:value="fieldsValue[child['field']]" v-model:fieldsValue="fieldsValue" :title="child.name" :children="child.children" :modelId="modelId" :editId="editId"
              :field="child.field" :required="child.required" :placeholder="child.tips" :setting="child.setting" v-model:childrenShow="child.childrenShow" />
          </div>
        </div>
      </el-collapse-transition>
    </div>
  </div>
</template>

<script setup>
import { reactive, computed, markRaw } from 'vue'
import RuifoxEditor from "@/components/ruifoxComponents/RuifoxEditor"
import RuifoxText from "@/components/ruifoxComponents/RuifoxText"
import RuifoxRadio from "@/components/ruifoxComponents/RuifoxRadio"
import RuifoxSelect from "@/components/ruifoxComponents/RuifoxSelect"
import RuifoxSelectMultiple from "@/components/ruifoxComponents/RuifoxSelectMultiple"
import RuifoxCheckbox from "@/components/ruifoxComponents/RuifoxCheckbox"
import RuifoxDateTime from "@/components/ruifoxComponents/RuifoxDateTime"
import RuifoxThumb from "@/components/ruifoxComponents/RuifoxThumb"
import RuifoxImages from "@/components/ruifoxComponents/RuifoxImages"
import RuifoxTextarea from "@/components/ruifoxComponents/RuifoxTextarea"
import RuifoxDepart from "@/components/ruifoxComponents/RuifoxDepart"
import RuifoxNumber from "@/components/ruifoxComponents/RuifoxNumber"
import RuifoxSummary from "@/components/ruifoxComponents/RuifoxSummary"
// import RuifoxTreeSelect from "@/components/ruifoxComponents/RuifoxTreeSelect"
// import RuifoxCategory from "@/components/ruifoxComponents/RuifoxCategory"

const props = defineProps({
  data: {
    type: Array,
    default: () => []
  },
  fieldsValue: {
    type: Object,
    default: () => {}
  },
  modelId: {
    type: String,
    default: ""
  },
  editId: {
    type: String,
    default: ""
  }
})
const data = computed(() => props.data)
const fieldsValue = computed(() => props.fieldsValue)
const editId = computed(() => props.editId)
const modelId = computed(() => props.modelId)
// 表单控件映射
const controlMap = reactive({
  catId: markRaw(RuifoxSelect),
  text: markRaw(RuifoxText),
  editor: markRaw(RuifoxEditor),
  select: markRaw(RuifoxSelect),
  // category: markRaw(RuifoxCategory),
  // treeSelect: markRaw(RuifoxTreeSelect),
  number: markRaw(RuifoxNumber),
  selectMultiple: markRaw(RuifoxSelectMultiple),
  radio: markRaw(RuifoxRadio),
  checkbox: markRaw(RuifoxCheckbox),
  datetime: markRaw(RuifoxDateTime),
  depart: markRaw(RuifoxDepart),
  image: markRaw(RuifoxThumb),
  images: markRaw(RuifoxImages),
  textarea: markRaw(RuifoxTextarea),
  summary: markRaw(RuifoxSummary),
  username: null,
  url: null,
  status: null,
  state: null,
  relevant: null,
  count: null,
  comefrom: markRaw(RuifoxText),
})
const getControl = (data) => {
  return controlMap[data.component]
}
</script>

<style lang='scss' scoped>
.title-options{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 15px;
  margin-top: 10px;
  .editor-more-title{
    display: flex;
    align-items: center;
    cursor: pointer;
    .editor-icon{
      height: 14px;width: 14px;background-color: $mainColor;
      position: relative;
      border-radius: 2px;
      margin-right: 5px;
      span{
        display: block;
        height: 100%;
        width: 100%;
      }
      span.plus:after{
        height: 0;
        top: 7px;
      }
      span:before,span:after{
        content: '';
        display: block;
        background-color: #fff;
        position: absolute;
        transition: all 0.3s;
      }
      span:before{
        height: 2px;
        width: 10px;
        left: 2px;
        top: 6px;
      }
      span:after{
        height: 10px;
        width: 2px;
        left: 6px;
        top: 2px;
      }
    }
    p{
      font-size: 14px;
      color: $mainColor;
      margin-right: 10px;
    }
    .editor-more-tips{
      height: 18px;
      width: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #FFEDD2;
      border: 1px solid #FF9700;
      border-radius: 50%;
      span{
        color: #FF9700;
      }
    }
  }
}
</style>